<template>
  <div class="snow-container">
    <div
        class="snowflake"
        v-for="(snowflake, index) in snowflakes"
        :key="index"
        :style="{ left: snowflake.x + 'px', top: snowflake.y + 'px' }"
    ></div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      snowflakes: [],
      snowflakeCount: 200,
      snowflakeSpeed: 1,
      requiredDuration: '',
    };
  },
  mounted () {
    console.log(moment().startOf('week').format('YYYY-MM-DD'))
    console.log(moment().endOf('week').format('YYYY-MM-DD'))
  },
  created() {
    this.initializeSnow();
    setInterval(this.updateSnow, 30);
  },
  methods: {
    initializeSnow() {
      for (let i = 0; i < this.snowflakeCount; i++) {
        this.snowflakes.push({
          x: Math.random() * window.innerWidth,
          y: Math.random() * window.innerHeight,
          size: Math.random() * 2 + 1,
        });
      }
    },
    updateSnow() {
      for (let i = 0; i < this.snowflakes.length; i++) {
        const snowflake = this.snowflakes[i];
        snowflake.y += snowflake.size + this.snowflakeSpeed;
        snowflake.x += Math.random() - 0.5;
        if (snowflake.y > window.innerHeight) {
          snowflake.y = 0 - snowflake.size;
          snowflake.x = Math.random() * window.innerWidth;
        }
      }
    },
  },
};
</script>

<style scoped>
.snow-container {
  /*background-color: grey;*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.snowflake {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #d91313;
  border-radius: 50%;
}
</style>
